<template>
	<view>
		<view class="Box bb">
			<view class="u-flex u-row-between" style="height: 82rpx;">
				<view>车牌号：</view>
				<input @click="plateShow = true" v-model="queryForm.car_plate" disabled type="text" placeholder="请输入车牌号" style="text-align: right;">
			</view>
			<view class="u-flex u-row-between" style="height: 82rpx;">
				<view>车型：</view>
				<input v-model="queryForm.car_model" type="text" placeholder="请输入品牌名和轴数" style="text-align: right;">
			</view>
			<view class="u-flex u-row-between" style="height: 82rpx;">
				<view>牌照颜色：</view>
				<input v-model="queryForm.car_plate_color" type="text" placeholder="请输入车牌颜色" style="text-align: right;">
			</view>
			<view class="u-flex u-row-between" style="height: 82rpx;">
				<view>产权归属：</view>
				<input v-model="queryForm.ownership_of_property" type="text" placeholder="请输入产权归属方"
					style="text-align: right;">
			</view>
		</view>

		<view class="Box bb">
			<view class="u-flex u-row-between" style="height: 82rpx;">
				<view>是否开启预置皮重：</view>
				<switch @change="switchChange" />
			</view>
			<view class="u-flex u-row-between" style="height: 82rpx;">
				<view>预置皮重</view>
				<input v-model="queryForm.default_tare_weight" type="text" placeholder="请输入皮重重量(单位默认kg)"
					style="text-align: right;">
			</view>
		</view>

		<view class="confirmBox">
			<view class="addButton" @click="submit">确认添加</view>
		</view>
		
		<plate-input v-if="plateShow" :plate="queryForm.car_plate" @export="setPlate" @close="plateShow=false"></plate-input>
	</view>
</template>

<script>
	import {
		addCar
	} from '../../common/api.config.js'
	import plateInput from '@/components/uni-plate-input/uni-plate-input.vue'
	export default {
		components:{plateInput},
		data() {
			return {
				plateShow:false,
				// 预设字段 根据接口情况修改
				queryForm: {
					car_plate: '',
					car_model: '',
					car_plate_color: '',
					ownership_of_property: '',
					default_tare_weight: '',
					enable_default_tare_weight: 0,
				}
			}
		},
		methods: {
			switchChange(e) {
				console.log(e);
				const value = e.detail.value
				this.queryForm.enable_default_tare_weight = value ? 1 : 0
			},
			setPlate(e){
				this.queryForm.car_plate = e
				this.plateShow = false
			},
			async submit() {
				uni.showLoading({
					title:'请求中'
				})
				console.log(this.isTrue());
				if (!this.isTrue()) {
					uni.showToast({
						title: '请全部填写',
						icon: 'none'
					})
					return
				}
				const {
					data,
					code
				} = await addCar(this.queryForm)
				uni.hideLoading()
				if (code == 1) {
					uni.showToast({
						title: '添加成功',
						icon: 'success'
					})
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						})
					}, 1500);
				}
			},
			isTrue() {
				const obj = this.queryForm
				let flag = true
				for (let key in obj) {
					if (obj[key] === "") return false
				}
				return flag
			}
		}
	}
</script>

<style lang="scss">
	input {
		width: 400rpx;
	}

	.confirmBox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 148rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);

		.addButton {
			width: 686rpx;
			height: 84rpx;
			border-radius: 42rpx;
			background: rgba(254, 240, 7, 1);
			font-size: 32rpx;
			font-weight: 400;
			line-height: 84rpx;
			color: rgba(51, 51, 51, 1);
			text-align: center;
			margin: 22rpx 0 0 32rpx;
		}
	}

	page {
		background: rgba(246, 246, 246, 1);
	}

	.Box {
		width: 686rpx;
		border-radius: 32rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 12rpx 12rpx 0rpx rgba(0, 0, 0, 0.06);
		padding: 32rpx;
		margin: 32rpx 0 0 32rpx;
	}

	view {
		color: rgba(51, 51, 51, 1);
	}
</style>
